<template>
  <div class="os-card"
       @mouseover="handleMouseMove"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave"
       ref="card">
    <div class="os-card--items"
         :style="cardStyle">
      <div class="os-card__bg"
           :style="[cardBgTransform, cardBgImage]"></div>
      <div class="os-card__info">
        <slot name="header"></slot>
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { computed, ref, defineComponent, onMounted } from 'vue'

  export default defineComponent({
    name: 'os-card',
    props: ['dataImage'],
    setup(props) {
      const mouseX = ref<number>(0)
      const mouseY = ref<number>(0)
      const width = ref<number>(0)
      const height = ref<number>(0)
      const card = ref<any>(null)
      const mouseLeaveDelay = ref<any>(null)

      const mousePX = computed(() => {
        return mouseX.value / width.value || 0
      })
      const mousePY = computed(() => {
        return mouseY.value / height.value || 0
      })
      const cardStyle = computed(() => {
        const rX = mousePX.value * 20
        const rY = mousePY.value * -20
        // console.log(rX, rY);
        return {
          transform: `rotateY(${rX}deg) rotateX(${rY}deg)`,
        }
      })
      const cardBgTransform = computed(() => {
        const tX = mousePX.value * -30
        const tY = mousePY.value * -30
        return {
          transform: `translateX(${tX}px) translateY(${tY}px)`,
        }
      })
      const cardBgImage = computed(() => {
        return {
          backgroundImage: `url("/static/${props.dataImage}.svg")`,
        }
      })

      const handleMouseMove = (e: any) => {
        mouseX.value = e.x - card.value.offsetLeft - width.value / 2
        mouseY.value = e.y - card.value.offsetTop - height.value / 2
        // console.log(e, card.value.offsetTop, height.value);
        // console.log(mouseX.value, mouseY.value);
      }
      const handleMouseEnter = () => {
        // console.log(mouseLeaveDelay.value);
        clearTimeout(mouseLeaveDelay.value)
      }
      const handleMouseLeave = () => {
        mouseLeaveDelay.value = setTimeout(() => {
          mouseX.value = 0
          mouseY.value = 0
        }, 800)
      }

      onMounted(() => {
        width.value = card.value.offsetWidth
        height.value = card.value.offsetHeight
      })

      return {
        mouseX,
        mouseY,
        width,
        height,
        mousePX,
        mousePY,
        cardStyle,
        cardBgImage,
        card,
        mouseLeaveDelay,
        cardBgTransform,
        handleMouseMove,
        handleMouseEnter,
        handleMouseLeave,
      }
    },
  })
</script>
<style lang="scss" scoped>
  $hoverEasing: cubic-bezier(0.23, 1, 0.32, 1);
  $returnEasing: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  @include b(card) {
    margin: 10px;
    // transform: perspective(800px);
    transform-style: preserve-3d;
    cursor: pointer;
    @include m(items) {
      position: relative;
      flex: 0 0 255px;
      width: 255px;
      height: 180px;
      background-color: #444857;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: rgb(0 0 0 / 66%) 0 7px 10px 0, inset #444857 0 0 0 5px, inset rgb(255 255 255 / 50%) 0 0 0 6px;
      transition: 1s $returnEasing;
      &:hover {
        .os-card__info {
          transform: translateY(-20%);
        }
        .card-desc {
          opacity: 1;
        }
        .os-card__info {
          transition: 0.6s $hoverEasing;
        }
        // .os-card__info:after {
        //   transition: 5s $hoverEasing;
        //   opacity: 1;
        //   transform: translateY(0);
        // }
        .os-card__bg {
          transition: 0.6s $hoverEasing, opacity 5s $hoverEasing;
          opacity: 0.8;
        }
        .os-card--items {
          transition: 0.6s $hoverEasing, box-shadow 2s $hoverEasing;
          box-shadow: rgba(white, 0.2) 0 0 10px 5px, rgba(white, 1) 0 0 0 1px, rgba(black, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px;
        }
      }
    }
    @include e(bg) {
      opacity: 0.5;
      position: absolute;
      top: -20px;
      left: -20px;
      width: 100%;
      height: 100%;
      padding: 20px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      transition: 1s $returnEasing, opacity 5s 1s $returnEasing;
      pointer-events: none;
    }
    @include e(info) {
      position: absolute;
      bottom: 30px;
      width: 100%;
      color: #fff;
      text-align: center;
      transform: translateY(20%);
      transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
      // &:after {
      //   content: "";
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   z-index: 0;
      //   width: 100%;
      //   height: 100%;
      //   background-image: linear-gradient(
      //     to bottom,
      //     transparent 0%,
      //     rgba(#000, 0.6) 100%
      //   );
      //   background-blend-mode: overlay;
      //   opacity: 0;
      //   transform: translateY(100%);
      //   transition: 5s 1s $returnEasing;
      // }
    }
  }
</style>